<?php 
    echo $js;
    echo $css;
?>

<style>
    #loginContent{
        width: 300px;
        margin: 0 auto;
        position:relative;
        height: 300px;
    }
    
    #messageError{ 
        color: #000;
        border: #FF0000 1px solid;
        height: 15px;
        padding: 5px;
        background-color: #ffebe8;
        border-radius: 5px;
        display: none;
    }
    
    #messageGood{ 
        color: #000;
        border: #01DF01 1px solid;
        height: 15px;
        padding: 5px;
        background-color: #BCF5A9;
        border-radius: 5px;
        display: none;
    }
    
    
</style>

<div id="loginContent">
    
    
    <img src="images/logoSF.png" alt="&#191;y por qu&eacute; no&#63; / seb.frab@gmail.com"/>
    
    <div style='height: 35px; margin-top: 30px;'>
        <div id='messageError'>
            <p><img src='./images/invalid.png' alt='invalid' style="float:left; padding-right: 5px;"/>Nombre de usuario o contrase&ntilde;a incorrectos</p>
        </div>
        
        <div id='messageGood'>
            <p><img src='./images/valid.png' alt='valid' style="float:left; padding-right: 5px;"/>Accediendo al sistema</p>
        </div>
    </div>
    
    <form id="formLogin" class="contact_form" action="#" method="post">
        <table>
            <tr>
                <td>
                    <label style="color:#FFF;">
                        Nombre de usuario
                    </label>
                    <input type="text" pattern="[A-Za-z\d\.\,].{3,75}" title="minimo 4 caracteres"  placeholder="sebfrab" required name="nombreUsuario" id="loginNombre" />
                </td>
            </tr>
            
            <tr>
                <td>
                    <label style="color:#FFF;">
                        Contrase&ntilde;a
                    </label>
                    <input type="password" pattern="[A-Za-z\d\.\,].{3,75}" title="minimo 4 caracteres"  placeholder="**********" required name="contrasenaUsuario" id="loginPassword" />
                </td>
            </tr>
            <tr>
                <td>
                    <button class="submit" type="submit">Acceder</button>
                </td>
            </tr>
        </table>
    </form>
</div>
    
    
  